<template>
  <div class="rec-detail">
    <div class="rec-detail-title">我的位置：
      <span @click="gohome()">首页</span>
      >
      <span v-if="$route.query.id == 1">生活类</span>
      <span v-if="$route.query.id == 8">生产类</span>
      <span v-if="$route.query.id == 9">政策类</span>
      >
      <span>{{ currentLocation }}</span>
    </div>
    <a-menu v-model="current" mode="horizontal">
      <a-menu-item v-for="(item,index) in productionList" :key="item.ID" @click="switchColumns(index)">{{ item.NAME }}</a-menu-item>
    </a-menu>
    <div>
      <article style="background-color: white;" v-html="productionitem"></article>
    </div>
  </div>
</template>

<script>
import { getAppGetFWLBListApi } from '@/api/resService'

export default {
  data() {
    return {
      current: [''],
      productionList: [],
      currentLocation:'',
      productionitem: '',
    };
  },
  methods: {
    switchColumns(index) {
      this.currentLocation = this.productionList[index].NAME
      this.productionitem = this.productionList[index].MS
    },
    gohome() {
      this.$router.push({ path: '/reception/Introduction/index' });
    },
    getAppGetFWLBList(id) {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: id,
      })
        .then((res) => {
          console.log('res', res)
          this.productionList = res.data
          this.productionitem = this.productionList[0].MS
          this.currentLocation = this.productionList[0].NAME
          this.current = this.productionList[0].ID
        })
        .catch((err) => {})
        .finally(() => {})
    },
  },
  mounted() {
    // this.getAppGetFWLBList8()
  },
  watch:{
    '$route.query': {
      immediate: true, // 如果需要在组件创建时立即触发，设置为true
      handler(newVal, oldVal) {
        // 你可以在这里根据新的参数执行相应的操作
        this.getAppGetFWLBList(this.$route.query.id)
      }
    }
  }
};
</script>

<style lang="less" scoped>
.rec-detail{
  width: 1500px;
  margin: 0 auto;
  margin-top: 20px;
  .rec-detail-title{
    span{
      cursor: pointer;
    }
  }
}
</style>